<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				width: 800px;
				height: 500px;
				border: 1px solid #000;
				margin: 0 auto;
			}
			ul li{
				list-style: none;
				width: 100px;
				height: 50px;
				background-color: red;
				margin:  0 auto;
				margin-top: 50px;
				text-align: center;
				line-height: 50px;
			}
			ul li:nth-child(2){
				transform: rotate(45deg);
			}
			ul li:nth-child(3){
				transform: translate(100px,0px);
			}
			ul li:nth-child(4){
				transform: scale(2,2);
			}
			
			ul li:nth-child(5){
				transform:  translate(200px,0px) rotate(45deg);
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 transform: rotate(45deg);
		 rotate 旋转 deg是单位 代表多少度
		 transform: translate(100px,0px);
		 translate 平移 水平方向 垂直方向
		 transform: scale(2,2);
		 scale 缩放 代表水平方向的拉伸 和 垂直方向的拉伸
		 
		 注意点:如果取值是1 代表不变 取值大于1 代表放大 取值小于1 代表缩小
		 如果水平和垂直缩放都一样 那么可以简写为一个参数
		 
		 
		 综合写法  	transform: rotate(45deg) translate(100px,0px) scale(1.5);
		 
		 
		 注意点:如果需要进行多个转换 用空格隔开  
		 2d的转换模块会修改元素的坐标系 如果旋转之后再平移 就不是原来的坐标系了
		 -->
		
		<ul>
			<li>正常</li>
			<li>旋转</li>
			<li>平移</li>
			<li>缩放</li>
			<li>综合的</li>
		</ul>
	</body>
</html>